<template>
  <div class="c-image-upload">
    <el-upload
      class="img-uploader"
      :class="{ 'exced-limit': fileList.length >= limit }"
      :action="$UPLOAD_URL"
      :headers="extraheaders"
      :show-file-list="showFileList"
      :on-success="handleOnSuccess"
      :on-error="handleOnError"
      :on-remove="handleOnRemove"
      :file-list="fileList"
      v-bind="$attrs"
    >
      <i class="el-icon-plus avatar-uploader-icon" />
      <slot slot="tip" name="tip" />
      <slot slot="trigger" name="trigger" />
    </el-upload>
  </div>
</template>

<script>
import emitter from '@/mixins/emitter'
import { getToken } from '@/utils/auth'
import { downloadFile } from '@/api/file'
// import config from '@/utils/config'

export default {
  mixins: [emitter],
  model: {
    event: 'change'
  },
  props: {
    showFileList: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 1
    },
    value: {
      type: Array,
      default: () => [],
      required: true
    },
    headers: {
      type: Object,
      default: () => ({
        token: getToken()
      })
    }
  },
  data() {
    return {
      fileList: [],
      extraheaders: {
        ...this.headers,
        token: getToken(),
        currentOrgId: this.$store.state.user.orgId
      },
      dialogVisible: false
    }
  },
  watch: {
    value: {
      handler: 'handleSetFileList',
      immediate: true
    },
    headers(val) {
      this.extraData = {
        ...val,
        token: getToken()
      }
    }
  },
  created() {
    // this.handleSetFileList()
  },
  methods: {
    handleSetFileList() {
      this.fileList = []
      console.log('handleSetFileList')
      this.value.forEach(file => {
        this.handleDownloadImg(file)
      })
    },
    handleReturnData() {
      return this.fileList.map(v => v.filePath)
    },
    handleOnSuccess(response, file, fileList) {
      this.$message.success('上传成功')
      this.handleDownloadImg(response.data)
    },
    handleOnError(err, file, fileList) {
      this.$message.error(err.message)
    },
    handleDownloadImg(file) {
      return downloadFile({ filePath: file }).then((res) => {
        this.handleNoObserveAddFileList({
          url: res,
          filePath: file
        })
        this.dispatch('ElFormItem', 'el.form.change', this.fileList)
        console.log('handleDownloadImg', this.fileList)
        this.$emit('on-change', this.handleReturnData())
        this.$emit('input', this.handleReturnData())
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    handleNoObserveAddFileList(file) {
      const index = Math.max(this.fileList.length, 0)
      this.fileList[index] = file
    },
    handleOnRemove(file) {
      this.fileList = this.fileList.filter(v => v.filePath !== file.filePath)
      this.$emit('on-change', this.handleReturnData())
      this.$emit('input', this.handleReturnData())
    }
  }
}
</script>

<style lang="scss">
.c-image-upload {
  .img-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .exced-limit {
    .el-upload {
      display: none;
    }
  }
  .img-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .img-item {
     width: 100%;
     height: 100%;
     object-fit: cover;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
}
</style>
